<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距合并</title>
		<style>
			div#pa rent{
				width: 300px;
				height: 300px;
				border: 1px solid red;
				/* 上框 加外边距 */
				marg 	in-bottom: 80px;
			}
			div#s on{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				/* 下框 加外边距 */
				margin-top: 100px;
			}
			/* -------------外边距垂直合并问题：建议：加横向，不要加纵向
			                                  方案：去掉一个最小值，加内边距
			
		----------------*/
		div#parent{
			width: 300px;
			height: 300px;
			/* 边框：内部空间--子元素加外边距 */
			bor der: 1px solid red;
			background-color: #55ffff;
			/* 上外边距 40px */
			margin-top: 40px;
			/* ①添加溢出隐藏或者auto */
			over flow: hidden;
			/* ②border：1px的透明边框 */
			bor der: 1px solid transparent;
			padding-top: 1px;
		}
		div#son{
			width: 100px;
			height: 100px;
			background-color: #00ff00;
			/* 上外边距 100px */
			margin-top: 100px;
			
		}
			
			
		/* 【内部垂直合并：最大值为主】--需要填充 
		    解决方法：①找到父元素，添加overflow：hidden[创建块级上下文，阻止外边距合并]
                     ②找到父元素，添加border或者padding-方向，建议：透明border
		
		*/	
		</style>
	</head>
	<body>
		<div id="parent">
			<div id="son"></div>
			</div>
		</body>
</html>